<template>
  <div class="container">
    <div class="headerForm">
      <el-form
        ref="headerSearchForm"
        :model="headerSearchForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="统计指标维度" prop="statisticalIndicators">
          <el-select
            v-model="headerSearchForm.statisticalIndicators"
            placeholder="请选择"
            size="mini"
            clearable
          >
            <el-option
              v-for="(item, index) in statisticalIndicatorsData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务种类" prop="operationKind">
          <el-select
            :v-model="headerSearchForm.operationKind"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, index) in operationKindData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务细分" prop="businessSubdivide">
          <el-select
            :v-model="headerSearchForm.businessSubdivide"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, index) in businessSubdivideData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务品种" prop="businessVariety">
          <el-select
            :v-model="headerSearchForm.businessVariety"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, index) in businessVarietyData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户排名TOP" prop="customerRank">
          <el-input
            placeholder="请输入"
            :v-model="headerSearchForm.customerRank"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户等级" prop="customerGrade">
          <el-select
            :v-model="headerSearchForm.customerGrade"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, index) in customerGradeData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="时间" prop="time">
            <el-radio
              v-model="headerSearchForm.time"
              label="固定时间维度"
            ></el-radio>
            <el-radio-group v-model="headerSearchForm.subTime">
              <el-radio label="近一年"></el-radio>
              <el-radio label="近一季"></el-radio>
              <el-radio label="近一个月"></el-radio>
              <el-radio label="当年"></el-radio>
              <el-radio label="当月"></el-radio>
              <el-radio label="当季"></el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-form-item label=" " prop="time">
            <el-radio
              v-model="headerSearchForm.time"
              label="自选时间维度"
            ></el-radio>
            <el-date-picker
              v-model="headerSearchForm.dateDimension"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <el-row>
        <el-col>
          <el-button class="gray-btn" type="primary">查询</el-button>
          <el-button class="btn">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-contant">
      <el-table :data="tableData">
        <el-table-column
          label="序号"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column
          label="客户名称"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="客户评级"
          align="center"
          prop="customerRate"
        ></el-table-column>
        <el-table-column
          label="指标项"
          align="center"
          prop="targetItem"
        ></el-table-column>
        <el-table-column
          label="业务种类"
          align="center"
          prop="operationKind"
        ></el-table-column>
        <el-table-column
          label="业务细分"
          align="center"
          prop="businessSubdivide"
        ></el-table-column>
        <el-table-column
          label="业务品种"
          align="center"
          prop="businessVariety"
        ></el-table-column>
        <el-table-column
          label="数值"
          align="center"
          prop="NumValue"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template>
            <span
              style="color: #1f9bfd; cursor: pointer"
              @click="dialogVisible = true"
              >明细</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="pageFn"
      style="text-align: right"
    >
    </el-pagination>
    <!-- 明细弹框 -->
    <el-dialog
      title="明细"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      destroy-on-close
    >
      <el-table :data="detailTableData">
        <el-table-column
          label="序号"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column
          label="订单编号"
          align="center"
          prop="orderNumber"
        ></el-table-column>
        <el-table-column
          label="交易时间"
          align="center"
          prop="exchangeHour"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="品种编号"
          align="center"
          prop="varietyNum"
        ></el-table-column>
        <el-table-column
          label="品种名称"
          align="center"
          prop="varietyName"
        ></el-table-column>
        <el-table-column
          label="单价"
          align="center"
          prop="unitPrice"
        ></el-table-column>
        <el-table-column
          label="数量"
          align="center"
          prop="number"
        ></el-table-column>
        <el-table-column
          label="总价"
          align="center"
          prop="totalPrice"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 1,
      dialogVisible: false,
      headerSearchForm: {
        statisticalIndicators: '',
        operationKind: '',
        businessSubdivide: '',
        businessVariety: '',
        customerRank: '',
        customerGrade: '',
        time: '',
        subTime: '',
        dateDimension: '',
      },
      statisticalIndicatorsData: [],
      operationKindData: [],
      businessSubdivideData: [],
      businessVarietyData: [],
      customerGradeData: [],
      tableData: [
        {
          name: '交通银行股份有限公司',
          customerRate: '一级',
          targetItem: '交易量',
          operationKind: '同业投资',
          businessSubdivide: '申购',
          businessVariety: '银行理财',
          NumValue: '11111',
        },
        {
          name: '交通银行股份有限公司',
          customerRate: '一级',
          targetItem: '交易量',
          operationKind: '同业投资',
          businessSubdivide: '申购',
          businessVariety: '银行理财',
          NumValue: '11111',
        },
      ],
      detailTableData: [
        {
          orderNumber: '111111',
          exchangeHour: '2022-08-11 11:11:53',
          varietyNum: '22222',
          varietyName: '22进出03',
          unitPrice: '87',
          number: '9898',
          totalPrice: 825000,
        },
        {
          orderNumber: '111111',
          exchangeHour: '2022-08-11 11:11:53',
          varietyNum: '22222',
          varietyName: '22进出03',
          unitPrice: '87',
          number: '9898',
          totalPrice: 825000,
        },
      ],
    }
  },
  methods: {
    pageFn() {},
  },
}
</script>

<style lang="scss" scoped>
.container {
  background: #262d47;
  padding: 24px;
  .table-contant {
    min-height: 500px;
    margin-top: 16px;
  }
}
::v-deep {
  .el-form {
    .el-form-item {
      margin: 0 40px 10px 0;
      .el-date-editor {
        width: 300px;
      }
    }
  }
  .el-radio__label {
    color: #fff;
  }
  .el-dialog {
     border-top: 4px solid rgba($color: #1f9bfd, $alpha: 0.9);
    .el-table th.el-table__cell {
      background-color: #181616 !important;
      color: #fff;
    }
    .el-dialog__header {
      border-bottom: 1px solid rgba(126, 163, 255, 0.3);
      padding: 0;
      height: 49px;
      line-height: 49px;
      padding-left: 16px;
    }
    .el-dialog__footer {
      border-top: 1px solid rgba(126, 163, 255, 0.3);
    }
  }
}

</style>
